<template>
	<uni-section>
		<uni-list v-if="imageRecords && imageRecords.list.length > 0">
			<uni-list :border="true" v-for="item in imageRecords.list" :key="item.id">
				<uni-list-chat :avatar-circle="false" title="文生图" :avatar="item.images[0]?.url" :note="item.prompt"
					:time="formatImageRecordStatus(item)" thumbSize="lg" clickable
					@click="showLargeImage(item.images[0]?.url)">
				</uni-list-chat>
			</uni-list>
		</uni-list>
		<!-- <p v-else>暂无数据</p> -->

		<!-- 修改弹出框组件 -->
		<uni-popup ref="imagePopup" type="center" @close="closePopup" background-color="rgba(0, 0, 0, 0.7)">
			<view class="popup-content" @click.stop>
				<!-- Add close button -->
				<view class="close-btn" @click="closePopup">×</view>
				<image 
					:src="selectedImageUrl" 
					class="large-image" 
					mode="aspectFit"
				/>
			</view>
		</uni-popup>
	</uni-section>
</template>


<script lang="ts">
	import { defineComponent, ref, computed, onMounted } from 'vue';
	import { getTextToImageRecord, TextToImageRecord, TextToImageRecordItem } from '@/api/text2imagerecord';
	import globalConfig from '@/js/globals';

	export default defineComponent({
		setup() {
			const imageRecords = ref<TextToImageRecord | null>(null);
			const isImagePopupVisible = ref(false);
			const selectedImageUrl = ref('');
			const imagePopup = ref(null);
			// 点击卡片处理
			const onClick = (taskId : string) => {
				console.log('Clicked task ID:', taskId);
				// 这里可以添加更多的处理逻辑，例如跳转到任务详情页面
			};

			// 操作点击
			const actionsClick = (action : string, taskId : string) => {
				console.log(`执行动作: ${action}, 任务ID: ${taskId}`);
				// 这里可以添加分享、点赞、评论的具体逻辑
			};

			const getImageRecordList = async (clientId : string) => {
				console.log('Clicked task ID:', clientId);
				// 这里可以添加更多的处理逻辑，例如跳转到任务详情页面
				const params = {
					clientId: clientId
				};
				const response = await getTextToImageRecord(params);
				console.log("获取文生图记录信息结果", response)
				imageRecords.value = response.data;
			};

			const formatImageRecordStatus = (item : TextToImageRecordItem) : string => {
				const status = item.status;
				if (status == "1") {
					return '已完成';
				} else if (status == "2") {
					return '进行中';
				}
				else if (status == "3") {
					return '已取消';
				}
				return '排队中';
			}

			const showLargeImage = (url : string) => {
				console.log('Image URL:', url);
				selectedImageUrl.value = url;
				imagePopup.value?.open();
			
			};

			const closePopup = () => {
				isImagePopupVisible.value = false;
				imagePopup.value?.close();
			};

			// 在 onMounted 中设置默认值
			onMounted(() => {
				//获取当前用户文生图的记录
				getImageRecordList(globalConfig.clientId);
			});

			return {
				imagePopup,
				imageRecords,
				onClick,
				actionsClick,
				formatImageRecordStatus,
				showLargeImage,
				closePopup,
				isImagePopupVisible,
				selectedImageUrl
			};
		}
	});
</script>

<style scoped>


	.popup-content {
		position: relative;
		width: 100vw;
		height: calc(100vh - 50px);
		max-width: 100vw;
		max-height: 100vh;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.large-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}


	.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-size: 20px;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
</style>